import Guide from '@/components/Guide';
import { JiessComponent } from '@/jiessConfig';
import { trim } from '@/utils/format';
import { PageContainer } from '@ant-design/pro-components';
import { useModel } from '@umijs/max';
import { Button } from 'antd';
import styles from './index.less';

function setup(this: any) {
  let level = 1;
  const area = this.area({ title: '无限弹框示例' });
  const config = (show: { value: boolean }) => ({
    okType: 'primary',
    okText: '新弹出一层',
    cancelText: '关闭当前层',
    title: `当前层级【第${level++}层】`,
    onOk: () => this.dialog(config),
    onCancel() {
      // 或根据响应式关闭当前层
      show.value = false;
    },
    children: this.render({
      is: Button,
      children: '关闭所有层',
      onClick: () => {
        level = 1;
        this.dialog().closeAll();
      },
    }),
  });
  area
    .add(
      this.render({
        is: Button,
        type: 'primary',
        children: '开启无限弹框',
        onClick: () => this.dialog(config),
      }),
    )
    .done();
}

const HomePage: React.FC = () => {
  const { name } = useModel('global');
  return (
    <PageContainer ghost>
      <div key="first" className={styles.container}>
        <Guide name={trim(name)} />
      </div>
      <JiessComponent setup={setup} />
    </PageContainer>
  );
};

export default HomePage;
